<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:fn="http://java.sun.com/jsp/jstl/functions"
	xmlns:p="http://primefaces.org/ui"
	lang="en">
	
	<f:view contentType="text/html">
	<ui:decorate template="/WEB-INF/facelets/faceletListar.xhtml">
		<ui:define name="form">
				<h:form styleClass="form-inline">
					<div class="control-group">
						<p:commandButton action="#{PagamentoMB.criar}" value="Novo &raquo;"></p:commandButton>
					</div>	
					
					<fieldset>
						<legend>Filtros da pesquisa</legend>
						<div class="control-group">
							<h:outputLabel value="Sócio:" for="socio" styleClass="control-label" />
							<p:selectOneMenu id="socio" value="#{PagamentoMB.socioPesquisa}" converter="entidadeConverter">  
		            			<f:selectItems value="#{PagamentoMB.listaSocio}" 
		                			var="obj" itemLabel="#{obj.nome}" itemValue="#{obj}" />
		                		
		                		<p:ajax update="lista" listener="#{PagamentoMB.pesquisar}"></p:ajax>	  
		        			</p:selectOneMenu>  
						</div>
					</fieldset>
						
					<p></p>
						
						<p:dataTable
							id="lista" 
							value="#{PagamentoMB.lista}" 
							var="obj" 
							paginator="true"
							rows="10"
							rowKey="#{obj.id}"
							widgetVar="tabela"
							rowIndexVar="indice"
							emptyMessage="Nenhum registro encontrado.">
							
							<p:column>
								<f:facet name="header">
						       		<h:outputText value="Nº" />
						       	</f:facet>
						       	<div align="center">
						    		<h:outputText value="#{indice + 1}" />
						    	</div>
						    </p:column>
							
							<p:column>
					        	<f:facet name="header">
					        		<h:outputText value="Sócio" />
					            </f:facet>
								<div>					           
					        		<h:outputText value="#{obj.socio.nome}" />
					        	</div>
					        </p:column>
					        
							<p:column sortBy="#{obj.data}">
					        	<f:facet name="header">
					        		<h:outputText value="Data" />
					        	</f:facet>
					        	<div align="center">
					            	<h:outputText value="#{obj.data}" >
					            		<f:convertDateTime pattern="dd/MM/yyyy"></f:convertDateTime>
					            	</h:outputText>
					            </div>
					        </p:column>
					        
					        <p:column sortBy="#{obj.mes}">
					        	<f:facet name="header">
					        		<h:outputText value="Mês" />
					        	</f:facet>
					        	<div align="center">
					            	<h:outputText value="#{obj.mes}" />
					            </div>
					        </p:column>
					        
					        <p:column sortBy="#{obj.ano}">
					        	<f:facet name="header">
					        		<h:outputText value="Ano" />
					        	</f:facet>
					        	<div align="center">
					            	<h:outputText value="#{obj.ano}" />
					            </div>
					        </p:column>
					        
					        <p:column sortBy="#{obj.valor}">
					        	<f:facet name="header">
					        		<h:outputText value="Valor" />
					        	</f:facet>
					        	<div align="center">
					            	<h:outputText value="#{obj.valor}">
					            		<f:convertNumber currencyCode="BRL" type="currency" />
					            	</h:outputText>
					            </div>
					        </p:column>
					    </p:dataTable>
						
					</h:form>
				</ui:define>
	</ui:decorate>
</f:view>
</html>